<template>
  <div class="shareInfo" v-if="info !== ''">
    <hmNavBar :path="rePath"></hmNavBar>
    <div class="content">
      <h3 class="title">{{ info.title }}</h3>
      <div class="other">
        <img
          v-if="info.author.avatar"
          class="o1"
          :src="baseURL + info.author.avatar"
          alt=""
        />
        <img v-else class="o1" src="@/assets/logo.png" alt="" />
        <div class="o2">
          <div class="o2-top">{{ info.author.nickname }}</div>
          <div class="o2-bottom">
            {{ info.updated_at | formatTime }}
          </div>
        </div>
        <i class="iconfont o3">&#xe644;</i>
        <div class="o4">{{ info.read }}</div>
        <i
          class="iconfont o5"
          @click="star"
          :class="{
            red: userInfo.starArticles && userInfo.starArticles.includes(+id)
          }"
          >&#xe638;</i
        >
        <div
          class="o6"
          @click="star"
          :class="{
            red: userInfo.starArticles && userInfo.starArticles.includes(+id)
          }"
        >
          {{ info.star }}
        </div>
      </div>
      <div class="txt" v-html="info.content"></div>
    </div>
    <div class="line"></div>
    <!-- 评论
    van-list
       v-model:是否处于加载中 true:加载中,false:不处于加载中,如下 滚动条小于300,该值自动成true
       finished:true:加载完成(到了最后一页),false没加载完成
       finished-text:加载完成后最底部提示
       @load="加载的方法"
    -->
    <div class="comment">
      <h3 class="title">
        评论<span class="num">{{ commentTotal }}</span>
      </h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <div
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="item-top">
            <img
              v-if="item.author.avatar"
              :src="baseURL + item.author.avatar"
              alt=""
              class="t1"
              @click="sendtoMen(item.id)"
            />
            <img
              @click="sendtoMen(item.id)"
              v-else
              src="@/assets/logo.png"
              alt=""
              class="t1"
            />
            <div class="t2" @click="sendtoMen(item.id)">
              <div class="t2-top">{{ item.author.nickname }}</div>
              <div class="t2-bottom">{{ item.created_at | formatTime }}</div>
            </div>
            <div
              class="t3"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(+item.id)
              }"
              @click="commentStar(item)"
            >
              {{ item.star }}
            </div>
            <i
              class="iconfont t4"
              @click="commentStar(item)"
              :class="{
                red:
                  userInfo.starComments &&
                  userInfo.starComments.includes(+item.id)
              }"
              >&#xe638;</i
            >
          </div>
          <div class="item-middle">
            {{ item.content }}
          </div>
          <div class="item-bottom" v-if="item.children_comments.length > 0">
            <div
              class="bottom-info"
              v-for="(item2, index2) in item.children_comments"
              :key="index2"
            >
              <span class="info-name">{{ item2.author }}:</span>
              <!-- <span>:&nbsp;</span> -->
              <span class="info-txt">{{ item2.content }}</span>
              <br />
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 底部发表评论区域 -->
    <div class="footer">
      <div class="f1" @click="footerClick">
        <span class="f1-txt">我来补充几句</span>
      </div>
      <!-- 用户信息中存在收藏文章数组,且数组中包含当前文章的id 就使用red的class-->
      <div
        class="f2"
        @click="collect"
        :class="{
          red:
            userInfo.collectArticles && userInfo.collectArticles.includes(+id)
        }"
      >
        <div class="iconfont">&#xe63c;</div>
        <div class="f2-num">{{ info.collect }}</div>
      </div>

      <div
        class="f2"
        @click="star"
        :class="{
          red: userInfo.starArticles && userInfo.starArticles.includes(+id)
        }"
      >
        <div class="iconfont">&#xe638;</div>
        <div class="f2-num">{{ info.star }}</div>
      </div>
      <div class="f2">
        <div class="iconfont">&#xe63e;</div>
        <div class="f2-num">323</div>
      </div>
    </div>
    <!-- 评论弹窗 -->
    <!-- van-popup
           v-model:控制是否显示弹框
           position:弹框的位置
     -->
    <van-popup v-model="showSendComment" position="bottom">
      <div class="send-area">
        <van-field class="field" v-model="inputValue" type="textarea" rows="4">
        </van-field>
        <div class="send-line">
          <!-- 输入文字才可以发送 -->
          <span v-if="inputValue.length > 0" class="send-btn" @click="send"
            >发送</span
          >
          <span v-else class="send-btn2">发送</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  articlesShareInfo,
  articlesCommentList,
  sendArticlesComments,
  articlesCollect,
  articlesStar,
  articleCommentsStar
} from '@/api/find.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      rePath: this.$route.query.rePath,
      id: this.$route.params.id,
      info: '',
      baseURL: process.env.VUE_APP_URL,
      commentList: [],
      commentTotal: 0,
      finished: false,
      loading: false,
      currentPage: 0,
      pageSize: 2,
      showSendComment: false, // 是否显示弹框
      inputValue: '', // 评论输入框的值
      parent: ''
    }
  },
  // 关闭是清空输入框的值
  watch: {
    /*
    1:先写出要侦听的值
    2:去掉this.加上引号
    3:function 方法名(newVal,oldVal){newVal:当前 值,oldVal:上一刻的值}
    */
    showSendComment (newVal) {
      if (newVal == false) {
        this.inputValue = ''
      }
    }
  },
  methods: {
    async load () {
      this.currentPage++
      /* 一次次加载两条*/
      const _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      }
      const res2 = await articlesCommentList(this.id, _q)
      this.commentList.push(...res2.data.data.list)
      this.commentTotal = res2.data.data.total
      this.loading = false
      if (this.commentTotal <= this.commentList.length) {
        this.finished = true
      }
    },
    // 回复评论
    sendtoMen (id) {
      this.parent = id
      // 打开弹窗
      this.showSendComment = true
    },
    // 发表评论
    async send () {
      const res = await sendArticlesComments({
        content: this.inputValue,
        article: this.id,
        parent: this.parent
      })
      // 关闭弹窗
      // 发表评论优化：分两种情况 有parent就是回复评论，没有就是发表评论
      this.showSendComment = false
      if (this.parent == '') {
        if (this.commentList.length !== 0) {
          // 发表评论完成后 将数据添加到评论列表最前面
          res.data.data.star = 0
          this.commentList.unshift(res.data.data)
          this.commentTotal = this.commentList.length
        }
      } else {
        // 将返回值添加到相应评论的回复评论内(children_comments)
        //   1:找到id=this.parent的项索引
        /*
        返回值=数组.findIndex((item,index,arr)=>{
            return boolean值
            如果boolean为true,找到了,返回值=当前的index,中止查找
            到最后都没找到(return都是false) 返回值=-1
        })
        */
        const _index = this.commentList.findIndex(item => {
          return item.id === this.parent
        })
        this.commentList[_index].children_comments.push(res.data.data)
      }
      window.console.log(res)
    },
    //发送评论点击
    footerClick () {
      this.showSendComment = true
      //回复评论才有this.parent值,发表评论是不能有该值的
      this.parent = ''
    },
    // 收藏按钮点击
    async collect () {
      const res = await articlesCollect({
        id: this.id
      })
      // 提示1：收藏成功 2：取消收藏
      if (res.data.data.list.includes(+this.id)) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.success('取消收藏')
      }
      this.info.collect = res.data.data.num
      // 更新一下用户信息
      this.$store.dispatch('getUserInfo')
      window.console.log(res)
    },
    async star () {
      const res = await articlesStar({
        article: this.id
      })
      // 提示1：点赞成功 2：取消点赞
      if (res.data.data.list.includes(+this.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
      this.info.star = res.data.data.num
      // 更新一下用户信息
      this.$store.dispatch('getUserInfo')
      window.console.log(res)
    },
    // 点赞
    async commentStar (item) {
      const res = await articleCommentsStar({
        id: item.id
      })
      window.console.log(res)
      // 提示1：点赞成功 2：取消点赞
      if (res.data.data.list.includes(+item.id)) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
      item.star = res.data.data.num
      // 更新一下用户信息
      this.$store.dispatch('getUserInfo')
    }
  },
  async created () {
    const res = await articlesShareInfo(this.id)
    this.info = res.data.data
  }
}
</script>

<style lang="less" scoped>
.shareInfo {
  .content {
    padding: 0 @p15;
    background: #ffffff;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }
    .other {
      display: flex;
      align-items: center;
      color: #ccc;
      font-size: 12px;
      margin: 20px 0;
      .o1 {
        width: 22px;
        height: 22px;
        border-radius: 50%;
      }
      .o2 {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        text-align: left;
        line-height: 15px;
        letter-spacing: 0px;
        flex: 1;
        margin-left: 10px;
        .o2-bottom {
          font-weight: 400;
          color: #b4b4bd;
        }
        .o2-top {
          font-weight: 600;
          color: #545671;
        }
      }
    }
    .txt {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      letter-spacing: 0px;
    }
    &::v-deep img {
      width: 100%;
    }
  }
  .line {
    height: 10px;
    background-color: #f7f4f5;
  }
  .comment {
    padding: 0 @p15;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      position: relative;
      margin-top: 20px;
      margin-bottom: 20px;
      .num {
        position: absolute;
        top: -10px;
        font-size: 12px;
        color: #ccc;
      }
    }
    .comment-item {
      margin-bottom: 30px;
      .item-top {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #ccc;
        .t1 {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .t2 {
          flex: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Semibold;
          line-height: 15px;
          letter-spacing: 0px;
          text-align: left;
          .t2-top {
            font-weight: 600;
            color: #545671;
          }
          .t2-bottom {
            font-weight: 400;
            color: #b4b4bd;
          }
          //   flex: 1 1 auto;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: space-between;
          //   align-self: stretch;
        }
      }
      .item-middle {
        margin-left: 45px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 27px;
        letter-spacing: 0px;
        word-wrap: break-word;
        // 到头就换行,它不能换行标点符号
        word-break: break-all;
      }
      .item-bottom {
        margin-left: 45px;
        padding: 20px 15px;
        font-size: 12px;
        background-color: #f7f4f5;
        font-family: PingFangSC, PingFangSC-Semibold;
        text-align: left;
        line-height: 20px;
        letter-spacing: 0px;
        .info-name {
          font-weight: 600;
          text-align: left;
          color: #545671;
        }
        .info-txt {
          color: #545671;
          font-weight: 400;
          word-wrap: break-word;
          // 到头就换行,它不能换行标点符号
          word-break: break-all;
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: 0 @p15;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    font-size: 12px;
    color: #b4b4bd;
    .f1 {
      flex: 1;
      display: inline-block;
      height: 34px;
      background-color: #f7f4f5;
      margin: 15px;
      line-height: 34px;
      padding-left: 10px;
    }
    .f2 {
      padding: 0 10px;
      text-align: center;
      .iconfont {
        font-size: 30px;
      }
    }
    /* .red {
      color: red !important;
    } */
  }
  .send-area {
    padding: @p15;
    .field {
      background-color: #f7f4f5;
    }
    .send-line {
      text-align: right;
      .send-btn {
        color: #ccc;
        font-size: 16px;
      }
      .send-btn2 {
        color: #ccc;
        font-size: 16px;
      }
    }
  }
  .red {
    color: red !important;
  }
}
</style>
